<template>
  <view class="content">
    <view class="title">{{ newsList.News_Name }}</view>
    <!-- <view class="foot">
      <view>
        <view v-if="newsList.News_Type == 0">通知公告</view>
        <view v-else-if="newsList.News_Type == 1">行情描述</view>
        <view v-else-if="newsList.News_Type == 2">国内资讯</view>
        <view v-else-if="newsList.News_Type == 3">国际资讯</view>
        <view v-else-if="newsList.News_Type == 4">公司动态</view>
      </view>
      <view class="dian mx-1"></view>
      <view>{{ newsList.News_Date.substring(0, 10) }}</view>
    </view> -->
    <!--
      <rich-text nodes="{{richTextContent}}"></rich-text>
     -->
    <!-- #ifdef APP -->
    <view v-html="newsList.News_Main" class="cont"></view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <rich-text :nodes="newsList.News_Main | formatRichText"></rich-text>
    <!-- #endif -->
  </view>
</template>

<script>
import { GoodsInquiryKey } from "@/api/information.js";
export default {
  data() {
    return {
      from: {
        Primary_Key_Name: "News_SerialNumber",
        Primary_Key: 0,
        Data: "news_info",
      },
      newsList: {
        News_Date: "",
      },
      html: ""
    };
  },
  methods: {
    async getData(from) {
      const res = await GoodsInquiryKey({
        data: from,
      });
      //   this.newsList = res[0];
      if (res.length == 1) {
        this.newsList = res[0]
      }

    },
  },
  onLoad(options) {
    this.from.Primary_Key = options.id;
    this.getData(this.from);
  },

  filters: {
    /**
     * 处理富文本里的图片宽度自适应
     * 1.查找img标签有无style属性，如果没有，加上style
     * 2.所有标签style后追加 max-width:100% !important;
     * 4.去掉<br/>标签
     * @param html
     * @returns {void|string|*}
     */
    formatRichText(html) { //控制小程序中图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        console.log(match.search(/style=/gi));

        if (match.search(/style=/gi) == -1) {
          match = match.replace(/\<img/gi, '<img style=""');
        }
        return match;
      });

      newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      return newContent;
    }
  }
};
</script>

<style lang="scss">
/deep/ img {
  width: 100%;
}

.content {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background: #fff;

  .title {
    text-align: center;
    font-size: 40rpx;
    font-weight: bold;
    margin: 10rpx 0;
  }

  .foot {
    display: flex;
    justify-content: center;
    font-size: 24rpx;
    color: #828d96;
    align-items: center;
    margin: 10rpx 0;

    .dian {
      width: 0px;
      height: 0px;
      border-radius: 50%;
      border: 4px solid #28a745;
      margin-top: 4rpx;
    }
  }

  .cont {
    // padding: 10rpx;
    margin: 20rpx 0 0 0;
  }
}
</style>
